<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link href="/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/font/css/font-awesome.min.css"/>
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/assets/css/ace-ie.min.css"/>
    <script type="text/javascript" src="/js/html5.js"></script>
    <script type="text/javascript" src="/js/respond.min.js"></script>
    <script type="text/javascript" src="/js/PIE_IE678.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/css/style.css"/>
    <link href="/assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="/Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/assets/css/font-awesome.min.css"/>
    <!--[if IE 7]>
    <link rel="stylesheet" href="/assets/css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <link href="/Widget/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="/Widget/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <script src="/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/typeahead-bs2.min.js"></script>
    <script src="/assets/layer/layer.js" type="text/javascript"></script>
    <script src="/assets/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="/Widget/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/Widget/icheck/jquery.icheck.min.js"></script>
    <script type="text/javascript" src="/Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="/Widget/Validform/5.3.2/Validform.min.js"></script>
    <script type="text/javascript" src="/Widget/webuploader/0.1.5/webuploader.min.js"></script>
    <script type="text/javascript" src="/Widget/ueditor/1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" src="/Widget/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script type="text/javascript" src="/Widget/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    <script src="/js/lrtk.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/H-ui.js"></script>
    <script type="text/javascript" src="/js/H-ui.admin.js"></script>

    <title>采购订单详情</title>
</head>

<!--弹窗样式-->

<body>
<div class="margin clearfix">
    <div class="Refund_detailed">
        <!--标题-->
        <div class="detailed_style">
            <div class="Receiver_style">
                <div class="Numbering" style="text-align: center"><h1 class="procurement-details"><b>订单详情表</b></h1>
                    <input type="hidden" th:value="${admin.getId()}" id="testi" />
                </div>
                <div class="Info_style clearfix">
                    <!--下拉列表选择供应商-->
                    <!--列表详情-->
                    <table class="table table-striped table-bordered table-hover" id="sample_table">

                        <thead>
                        <tboby>
                            <tr id="showtitle">
                                <th width="450px" height="60px" style="color: #ee162d;">商品编号</th>
                                <td width="250px" style="background-color: white; text-align: center; line-height: 40px"
                                    th:text="${pro.getPcm_ids()}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">供应商</th>
                                <td width="250px" style="background-color: white; text-align: center; line-height: 40px"
                                    th:text="${pro.supplier.getSupplier_name()}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">状态</th>
                                <td id="st" width="250px"
                                    style="background-color: white; text-align: center; line-height: 40px"
                                    th:text="${pro.getPcm_status()}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">运单号</th>
                                <td width="250px" style="background-color: white; text-align: center; line-height: 40px"
                                    th:text="${pro.getPcm_waybill() !=null ? pro.getPcm_waybill(): '' }"></td>
                            </tr>
                        </tboby>
                        </thead>

                        <thead>
                        <tboby>
                            <tr id="showtitle1">
                                <th width="450px" height="60px" style="color: #ee162d;">下单人</th>
                                <td width="250px" style="background-color: white; text-align: center; line-height: 40px"
                                    th:text="${pro.getAdminpart()!= null ? pro.getAdminpart().getName:''}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">审核人</th>
                                <td width="250px" style="background-color: white; text-align: center; line-height: 40px"
                                    th:text="${pro.getAdminauditor()!= null ? pro.getAdminauditor().getName():''}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">确认人</th>
                                <td width="250px" style="background-color: white; text-align: center; line-height: 40px"
                                    th:text="${pro.getAdminbuyer()!=null ? pro.getAdminbuyer().getName():''}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">入库人</th>
                                <td width="250px" style="background-color: white; text-align: center; line-height: 40px"
                                    th:text="${pro.getAdminkeeper()!=null ? pro.getAdminkeeper().getName():''}"></td>
                            </tr>
                        </tboby>
                        </thead>

                        <thead>
                        <tboby>
                            <tr id="showtitle2">
                                <th width="450px" height="60px" style="color: #ee162d;">下单日期</th>
                                <td width="250px" height="60px"
                                    style="background-color: white; text-align: center; line-height: 40px "
                                    th:text="${#dates.format(pro.getPcm_createdate(),'yyyy-MM-dd')}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">审核日期</th>
                                <td width="250px" height="60px"
                                    style="background-color: white; text-align: center; line-height: 40px "
                                    th:text="${#dates.format(pro.getPcm_auditdate(),'yyyy-MM-dd')}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">确认日期</th>
                                <td width="250px" height="60px"
                                    style="background-color: white; text-align: center; line-height: 40px "
                                    th:text="${#dates.format(pro.getPcm_startdate(),'yyyy-MM-dd')}"></td>
                                <th width="450px" height="60px" style="color: #ee162d;">入库日期</th>
                                <td width="250px" height="60px"
                                    style="background-color: white; text-align: center; line-height: 40px "
                                    th:text="${#dates.format(pro.getPcm_enddate(),'yyyy-MM-dd')}"></td>
                            </tr>
                        </tboby>
                        </thead>

                        <thead>
                        <tr>
                            <th width="100px">商品编号</th>
                            <th width="100px">商品名称</th>
                            <th width="100px">价格</th>
                            <th width="100px">数量</th>
                            <th width="100px">金额</th>
                            <th width="100px">状态</th>
                            <th width="100px" colspan="2">操作</th>
                            <th></th>
                        </tr>
                        </thead>

                        <tbody id="lg">
                        <tr class="length_trs" id="showtitle3" th:each="p : ${pe}">
                            <td th:text="${p.getPurchase_id}"></td>
                            <td th:text="${p.getProduct()}"></td>
                            <td th:text="${p.getPrices()}"></td>
                            <td><input type="text" th:value="${p.getAmount()}"
                                       style="border: none;background: transparent; text-align: center"
                                       onchange="changemuch(this)" onfocus="hold(this)"/></td>
                            <td th:text="${p.getPrice()}"></td>
                            <td th:text="${p.getProduct_status()}"></td>
                            <td colspan="2">
                                <a href="javascript:void(0)" onclick="remove(this)" title="商品删除|"
                                   class="am-btn am-btn-primary am-active icon ion-trash-a" style="font-size: 15px">商品删除|</a>
                                <a href="javascript:void(0)" onclick="warehouse(this)" title="|商品入库"
                                   class="am-btn am-btn-primary am-active " style="font-size: 15px">|商品入库</a>
                            </td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                    <!-- icon-undo -->
                    <div class="clearfix cl">
                        <div class="Button_operation" style="position: absolute; right:-30px; bottom:-50px">
                            <button id="sb" onclick="submitproduct();" class="btn btn-primary radius icon-ok"
                                    type="button" th:text="${pro.getPcm_status() != '未审核' ? '订单确认' : '订单审核'}">&nbsp;
                            </button>
                            <button onclick="ReturnshowAll();" class="btn btn-danger radius icon-undo" type="button">
                                &nbsp;返回主页
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--弹出的添加窗口-->
<!-- style="display:none"表示会隐藏该表单  style="display:block"表示会显示该表单.-->
<div id="add_pro" style="display: none">
    <!--商品下拉列表 style="background-color: white; text-align: center; line-height: 40px-->
    <div>
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tboby>
                <tr>
                    <th height="60px" style="color: #ee162d;">商品ID</th>
                    <td id="d1" style="background-color: white;text-align: center;line-height: 41px"></td>
                    <th height="60px" style="color: #ee162d;">商品名称</th>
                    <td id="d2" style="background-color: white;text-align: center;line-height: 41px"></td>
                </tr>
                <tr>
                    <th height="60px" style="color: #ee162d;">数量</th>
                    <td id="d3" style="background-color: white;text-align: center;line-height: 41px"></td>
                    <th height="60px" style="color: #ee162d;">仓库</th>
                    <td id="d4" style="background-color: white;text-align: center;line-height: 41px"></td>
                </tr>
            </tboby>
            </thead>
        </table>
        <div>
            <button class="btn btn-primary radius" style="width: 130px;margin-left: 3px" onclick="end(this)">商品入库
            </button>
        </div>
    </div>
</div>


</body>

<script th:inline="none" type="text/javascript">

    // 设置一个全局变变量 用于修改订单状态
    var stus ;

    // 点击入库触发该事件 若订单状态不是 已确认则不允许操作
    function warehouse(obj) {
        // 判断当前的订单状态
        var status = $("#showtitle").find("td").eq(2).text();
        if ("已确认" != status) {
            layer.msg('请先操作订单确认', {
                icon: 2,
                time: 3000 //2秒关闭（如果不配置，默认是3秒）
            });
            return;
        }
        // 判断
        var role = $("#testi").val();
        if (role !=22){
            layer.msg('你没有权限操作', {
                icon: 2,
                time: 3000 //2秒关闭（如果不配置，默认是3秒）
            });
            return;
        }
        // 成立弹出
        // 发送AJAX 获取当前产品的ID 商品名称 数量 查询出仓库信息
        var i1 = $(obj).parents("tr").find("td").eq(0).text();
        var i2 = $(obj).parents("tr").find("td").eq(1).text();
        var i3 = $(obj).parents("tr").find("input").eq(0).val();
        stus = i1;
        $.ajax({
            type: "get",
            url: "/etails/warehousename",
            data: {l1: i1},
            dateType: "TEXT",
            success: function (data) {
                if (data != null) {
                    // 赋值
                    $("#d1").text(i1);
                    $("#d2").text(i2);
                    $("#d3").text(i3);
                    $("#d4").text(data);
                } else {
                    layer.msg('打开失败!我们好像遇到了BUG', {
                        icon: 0,
                        time: 3000
                    })
                }
            }
        })
        // 条件判断 如果
        layer.open({
                type: 1,
                title: '商品入库',
                area: ['600px', '350px'],
                shadeClose: true,
                content: $('#add_pro'),
                resize: true,
                btn: ['取消'],
                yes: function (index, layero) {
                    // 取消按钮
                    layer.close(index);
                }
            }
        )
    }

    // 提交商品入库时 AJAX
    function end(obj) {
        // 发送AJAX 获取当前产品的ID 商品名称 数量 查询出仓库
        var i1 = $("#d1").text(); //商品ID
        var i2 = $("#d2").text(); //商品名称
        var i3 = $("#d3").text(); //商品数量
        var i4 = $("#showtitle").find("td").eq(0).text(); //订单ID
        /*          alert(i1);
                    alert(i2);
                     alert(i3);
                    alert(i4);*/
        $.ajax({
            type: "get",
            url: "/etails/warehouse",
            data: {l1: i1, l2: i2, l3: i3, l4: i4},
            dateType: "json",
            success: function (data) {
                if (data.length = 3) {
                    // 表示是最后一个订单
                    // 赋值
                    $("#showtitle").find("td").eq(2).text(data[0]);
                    $("#showtitle1").find("td").eq(3).text(data[1]);
                    $("#showtitle2").find("td").eq(3).text(data[2]);
                    // 循环
                    var p ;
                    $.each($("#lg tr"),function () {
                        p = $(this).find("td").eq(0).text();
                        if(p==stus){
                            $(this).find("td").eq(5).text("已入库");
                        }
                    })
                    layer.msg('入库成功', {
                        icon: 0,
                        time: 3000
                    })
                }else {
                    // 表示不是最后一个入库点详情单
                    $("#showtitle1").find("td").eq(3).text(data[0]);
                    $("#showtitle2").find("td").eq(3).text(data[1]);
                    // 循环 stus 是获取商品的编号 如果一样 给当前的状态 赋值
                    var p ;
                    $.each($("#lg tr"),function () {
                        p = $(this).find("td").eq(0).text();
                        if(p==stus){
                            $(this).find("td").eq(5).text("已入库");
                        }
                    })
                    layer.msg('入库失败,我们好像遇到了BUG', {
                        icon: 2,
                        time: 3000
                    })
                }

            },
        })
    }

    // 发送AJAX 通过供应商ID 获取到商家提供的产品
    function getproduct() {
        $.ajax({
            type: "get",
            url: "/procurement/getproduct",
            data: {id: $("#sup").val()},
            dataType: "json",
            success: function (data) {
                // 便于调试 看到在页面中输出的内容
                console.log(data);
                $("#product_select").html('<option value="0">选择商品</option>');
                $.each(data, function (i, obj) {
                    /*根据供应商ID 选择供应拥有的产品*/
                    $("#product_select").append('<option title="' + obj.product_name + '" value="' + obj.product_id + '">' + obj.product_name + '</option>')
                })
            },
            error: function (data) {
                alert("失败")
            }
        })
    }

    // 输入数量获取总价
    function getcount() {
        var price = document.getElementById("price").value;
        var much = document.getElementById("much").value;
        var rcount = (price * 100000) * (much * 100000) / 10000000000;
        $("#count").val(rcount);
    }

    //
    // 删除功能
    function remove(object) {
        // $(object).parent().parent(); 表示删除它父级元素的父级元素
        layer.confirm('确定要删除该订单吗?', {
            btn: ["确认", "取消"]
        }, function () {
            // 首先获取订单状态 如果是未审核 则允许删除该订单
            var st = $("#showtitle").find("td").eq(2).text();
            if (st == "未审核") {
                // 再次判断 是否是最后一个订单详情表
                var lengths = $("#lg tr[class='length_trs']").length;
                var id = $("#showtitle3").find("td").eq(0).text();
                var pid = $("#showtitle").find("td").eq(0).text();
                // 判断如果没有数据了
                if (lengths == 0) {
                    layer.msg('没有数据可以删除了', {
                        icon: 1,
                        time: 3000
                    })
                    // 结束该方法
                    return;
                }
                if (lengths == 1) {
                    layer.confirm('确定删除最后一条采购单吗?', {
                        btn: ["确认", "取消"]
                    }, function () {
                        // 获取到要删除的订单ID
                        // 因为是最后一条 所以成功后所有参数清空
                        // 发送AJAX 到后台进行删除
                        // 发送AJAX 将订单ID 传回去
                        $.ajax({
                            type: 'get',
                            url: '/etails/removedata',
                            data: {id: id, pid: pid, lengths: lengths},
                            dataType: "json",
                            success: function (data) {
                                // 若果回来的值是
                                // 表示数据库的值已经更改
                                // 将该页面的订单状态修改成已确认
                                if (data == 1) {
                                    // 删除这行内容
                                    $(object).parents("tr").remove();
                                    // 清空所有元素
                                    $("#showtitle").find("td").empty();
                                    $("#showtitle1").find("td").empty();
                                    $("#showtitle2").find("td").empty();
                                    $("#showtitle3").find("td").empty();
                                }
                            }, error: function (data) {
                                layer.msg('删除失败,我们好像遇到了BUG', {
                                    icon: 0,
                                    time: 3000
                                })
                            }
                        })
                        layer.msg('删除成功', {
                            icon: 0,
                            time: 3000
                        })
                    }, function () {
                        // 取消提示
                        layer.msg('已取消！', {
                            icon: 1,
                            time: 1500
                        })
                    })
                } else {
                    // 否则不是最后一条数据
                    // 发送AJAX 删除数据
                    $.ajax({
                        type: 'get',
                        url: '/etails/removedata',
                        data: {id: id, pid: pid, lengths: lengths},
                        dataType: "json",
                        success: function (data) {
                            // 若果回来的值是
                            // 表示数据库的值已经更改
                            // 将该页面的订单状态修改成已确认
                            if (data == 1) {
                                // 删除这行内容
                                $(object).parents("tr").remove();
                                layer.msg('删除成功', {
                                    icon: 1,
                                    time: 3000
                                })
                            }
                        }, error: function (data) {
                            layer.msg('删除失败,我们好像遇到了BUG', {
                                icon: 0,
                                time: 3000
                            })
                        }
                    })
                }
            } else {
                layer.msg('该订单不允许删除！', {
                    icon: 1,
                    time: 1500
                })
            }
        }, function () {
            layer.msg('已取消！', {
                icon: 1,
                time: 1500
            })
        })
    }


    // 按钮用于返回展示页面
    function ReturnshowAll() {
        window.location.href = "/procurement/showAll";
    }

    // 提交按钮时 获取总计
    function totlaprice() {
        // 循环
        var total = 0;
        $.each($("#sample_table tbody tr"), function () {
            var subtotal = $(this).find("td").eq(4).text();
            total = Number.parseFloat(subtotal) + total;
        })
        $("#total").html(total);
    }

    // 全局用于保存原来的数量
    var holdnum = 0;

    // 首先存入原有的数量
    function hold(object) {
        holdnum = $(object).val();
    }

    // 展示页面时更改数量
    function changemuch(much) {
        // 获取当前状态 如果是未审核 才允许修改数量
        var st = $("#showtitle").find("td").eq(2).text();
        if (st != "未审核") {
            layer.msg('该订单已不允许修改梳理', {
                icon: 2,
                time: 3000,
            });
            $(much).val(holdnum);
            return;
        }

        // 接收输入的值
        var num = $(much).val();
        // 正则表达
        var regu = /^\+?[1-9]\d*$/;
        // 进行判断
        if (num < 1 || !regu.test(num)) {
            layer.msg('请输入正确的正整数', {
                icon: 2,
                time: 3000,
            });
            // 数据回滚
            $(much).val(holdnum);
        } else {
            // 取到对应的价格
            var prices = $(much).parents("tr").find("td").eq(2).text();
            // alert(prices)
            // 获取到更改数量的那列的 金额 对其重新赋值
            $(much).parents("tr").find("td").eq(4).html(Number.parseInt(num) * Number.parseFloat(prices));
        }
    }

    // 提交审核
    function submitproduct() {
        // 查看是否值 没有则直接 return
        var lengths = $("#lg tr[class='length_trs']").length;
        if (lengths == 0) {
            layer.msg('没有订单能够操作了', {
                icon: 0,
                time: 1500
            });
            return;
        }
        // 通过条件判断 发送那个AJAX
        // 获取到提交按钮的文本 如果是 订单审核
        var data = $("#sb").text();
        if (data == "订单审核") {
            // 果然有数据 获取需要的数据发送到后台
            // 定义数组 存储数据
            // 商品ID
            var prouctid = [];
            // 商品数量
            var amounts = [];
            // 商品的总价(这个总价为 改变数量后价格)
            var price = [];
            // 循环
            $(".length_trs").each(function (i, obj) {
                var i = ($(obj)).find("td").eq('0').text();
                alert(i)
                prouctid.push(i);
            })

            $(".length_trs").each(function (i, obj) {
                var j = ($(obj).find('input').val());
                amounts.push(j);
            })

            $(".length_trs").each(function (i, obj) {
                var z = ($(obj).find("td").eq('4').text());
                price.push(z);
            })

            var prodata = {
                p: prouctid,
                amounts: amounts,
                price: price
            };
            layer.confirm('确定执行审核吗?', {
                btn: ["确认", "取消"]
            }, function () {
                $.get("/etails/audit", prodata, function (result) {
                    if (result == 0) {
                        layer.msg('审核失败,我们好像遇到BUG', {
                            icon: 0,
                            time: 1500
                        });
                    } else {
                        $("#showtitle").find("td").eq(2).text(result[2]);
                        $("#showtitle1").find("td").eq(1).text(result[0]);
                        $("#showtitle2").find("td").eq(1).text(result[1]);
                        $("#sb").text("订单确认");
                        layer.msg('审核成功', {
                            icon: 1,
                            time: 3000
                        })
                    }
                })
            }, function () {
                layer.msg('已取消审核', {
                    icon: 0,
                    time: 1500
                });
            })
        } else {
            // 这个时候 订单是已经审核过的状态
            // 进行判断 如果<tr>标签的值是已确认 就不需要在次确认 弹出提示框
            var st = $("#st").text();
            if (st == "已确认" || st == "已入库") {
                layer.msg("该订单不再支持此操作", {
                    icon: 2,
                    time: 3000,
                });
            } else {
                // 这个时候 订单的状态已经审核 可以发送AJAX 将订单状态修改成已确认
                // 获取到该订单的ID 主键
                var id = $("#showtitle").find("td").eq(0).text();
                // 弹框 确定
                layer.confirm('确定执行该操作吗?', {
                    btn: ["确认", "取消"]
                }, function () {
                    // 发送AJAX 将订单ID 传回去
                    $.ajax({
                        type: 'get',
                        url: '/etails/updataStatus',
                        data: {id: id},
                        dataType: "json",
                        success: function (data) {
                            // 若果回来的值是
                            // 表示数据库的值已经更改
                            // 将该页面的订单状态修改成已确认
                            $("#showtitle").find("td").eq(2).text(data[2]);
                            $("#showtitle").find("td").eq(3).text(data[3]);
                            $("#showtitle1").find("td").eq(2).text(data[0]);
                            $("#showtitle2").find("td").eq(2).text(data[1]);
                            layer.msg('确认订单成功', {
                                icon: 1,
                                time: 3000
                            })
                        }, error: function (data) {
                            layer.msg('确认订单失败,我们好像遇到了BUG', {
                                icon: 0,
                                time: 3000
                            })
                        }
                    })
                }, function () {
                    layer.msg('已取消订单确认', {
                        icon: 0,
                        time: 3000
                    })
                })
            }
        }
    }
</script>

</html>


</body>
</html>